<template>
  <div>
    {{ str }} -- {{ age }}
    <button @click="changeStr">changeStr</button>
    <button @click="changeAge">changeAge</button>
    <br />
    <h2>reactive</h2>
    <button @click="addArr1">addArr1</button>
    <p
      v-for="item in arr1"
      :key="item"
    >
      {{ item }}
    </p>
    <h2>ref</h2>
    <button @click="addArr2">addArr2</button>
    <p
      v-for="item in arr2"
      :key="item"
    >
      {{ item }}
    </p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  setup() {
    let str = ref('code')
    let age = ref(18)
    let arr1 = reactive([1, 2, 3, 4])
    let arr2 = ref([1, 2, 3, 4])

    const addArr1 = () => {
      // 开辟新的空间 this指向丢失了
      // reactive 是使用proxy的方式，没有concat的api
      // arr1 = [1, 2]
      // arr1.push(Date.now())
    }

    const addArr2 = () => {
      // arr2.value = [1, 2]
      arr2.value.push(5)
    }

    const changeStr = () => {
      str.value = 'fly'
    }

    const changeAge = () => {
      age.value = 20
    }
    return {
      str,
      age,
      arr1,
      arr2,
      addArr1,
      addArr2,
      changeStr,
      changeAge,
    }
  },
}
</script>

<style
  lang="scss"
  scoped
></style>
